<template>
    <div class="">
        <div class="content">
            <div class="training-content coach-page" style="margin-top: 120px;">
                <div class="aboutus-header display-flex-row justify-content-between">
                    <div class="aboutus-header-left display-flex-row align-items-center">
                        <img src="/images/ball.png" alt="">
                        <div class="aboutus-title">
                            <div class="title">INSTITUTION<span>ENTRY</span></div>
                            <p>机构入驻</p>
                        </div>
                    </div>
                    <div class="aboutus-crumb display-flex-row align-items-bottom">
                        当前位置：
                        <router-link to="/">首页></router-link>
                        <a href="">机构入驻</a>
                    </div>
                </div>
                <div class="about-box">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="机构名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="营业执照" prop="nikename">
                            <el-upload
                                    :action="imgupload"
                                    list-type="picture-card"
                                    :on-success="licenseChange"
                                    :on-remove="licenseRemove"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="机构地址" prop="addressInfo">
                            <v-distpicker @selected='selected'></v-distpicker>
                            <el-input style="margin-top: 10px;" v-model="ruleForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="照片" prop="nikename">
                            <el-upload
                                    :action="imgupload"
                                    list-type="picture-card"
                                    :on-success="bcPicChange"
                                    :on-remove="bcPicRemove"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>

                        <el-form-item label="负责人" prop="leaderName">
                            <el-input v-model="ruleForm.leaderName"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话" prop="leaderPhone">
                            <el-input v-model="ruleForm.leaderPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="固定电话" prop="phone">
                            <el-input v-model="ruleForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="证件号码" prop="leaderNo">
                            <el-input v-model="ruleForm.leaderNo"></el-input>
                        </el-form-item>
                        <el-form-item label="微信" prop="weChatNo">
                            <el-input v-model="ruleForm.weChatNo"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="mail">
                            <el-input v-model="ruleForm.mail"></el-input>
                        </el-form-item>


                        <el-form-item label="设置密码" prop="password">
                            <el-input type="password" v-model="ruleForm.password"></el-input>
                        </el-form-item>
                        <el-form-item label="重复密码" prop="password">
                            <el-input type="password" v-model="ruleForm.password1"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码" prop="valiCode">
                            <div style="display: flex;justify-content: center;align-items: center;width: 400px">
                                <el-input v-model="ruleForm.valiCode" class="codeInput"></el-input>
                                <el-button style="margin-left: 20px" class="btn-color-red" type="primary" :disabled="!isgetcode" @click="getVcode">
                                    {{tips_vcode}}
                                </el-button>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="btn-color-red" type="primary" @click="submitForm('ruleForm')">申请入驻
                            </el-button>
                            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import {userAddJG} from "../../../api/api/reg.js"
    import VDistpicker from 'v-distpicker'
    import {province, city, area} from '../../../utils/utils'
    import {baseImgPath, basefile, imgupload, videoupload} from '@/config/env.js';

    export default {
        components: {VDistpicker},
        data() {
            return {
                province,
                city,
                area,
                isgetcode: true,
                tips_vcode: "发送验证码",
                ruleForm: {
                    name: "",
                    password: "",
                    phone: "",
                    addressInfo: '',
                },
                imgupload:imgupload,
                videoupload:videoupload,
                dialogVisible1: false,
                dialogVisible2: false,

                rules: {
                    name: [
                        {required: true, message: '请输入机构昵称', trigger: 'blur'}
                        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    leaderName: [
                        {required: true, message: '请输入机构负责人', trigger: 'blur'}
                    ],
                    leaderPhone: [
                        {required: true, message: '机构负责人联系电话', trigger: 'blur'}
                    ],
                    addressInfo: [
                        {required: true, message: '机构地址', trigger: 'change'}
                    ],
                    phone: [
                        {required: true, message: '机构负责人固定电话', trigger: 'blur'}
                    ],
                    leaderNo: [
                        {required: true, message: '机构负责人证件', trigger: 'blur'}
                    ],
                    weChatNo: [
                        {required: true, message: '机构负责人微信', trigger: 'blur'}
                    ],
                    mail: [
                        {required: true, message: '机构负责人邮箱', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, message: '长度在6个字符以上', trigger: 'blur'}
                    ],
                    valiCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                        {max: 6, message: '请输入符合格式的验证码', trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            ...mapActions('Login', [
                'addJG',
                'getList',
                "getSmS"
            ]),
            selected(data) {
                let city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
                console.log(city);
                this.ruleForm.addressInfo = city;
            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.onSubmit()
                    } else {
                        return false;
                    }
                });
            },
            getMath(phone) {
                var start = Math.random().toString(36).substr(-10)
                var sjc = Date.parse(new Date());
                return start + phone + sjc
            },
            // 获取验证码
            getVcode() {
                let data = {
                    "phone": this.getMath(this.ruleForm.leaderPhone)
                }
                this.isgetcode = false;
                this.getSmS(data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: "发送成功",
                            duration: 5 * 1000
                        })
                        this.isgetcode = false;
                        var wait = 60;
                        // 验证码倒计时
                        this.timer = setInterval(() => {
                            if (wait == 0) {
                                this.tips_vcode = "发送验证码";
                                this.isgetcode = true;
                                wait = 60;
                                clearInterval(this.timer);
                            } else {
                                this.tips_vcode = wait + "s";
                                this.isgetcode = false;
                                wait--;
                            }
                        }, 1000);
                    } else {
                        this.isgetcode = true;
                    }
                });
            },
            onSubmit() {
                let data = new FormData()
                // data.append('params', this.ruleForm)
                console.log(data)
                this.ruleForm.license = JSON.stringify(this.ruleForm.license);
                this.ruleForm.bcPic = JSON.stringify(this.ruleForm.bcPic);
                this.addJG(this.ruleForm).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '入驻成功',
                            type: 'success'
                        })
                        this.$router.push('/login/login')
                    }
                })
            },

            licenseChange(Response, file, fileList) {
                console.log(fileList);
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })

                this.ruleForm.license = imgs;
                console.log(this.ruleForm.license)
            },

            licenseRemove(Response, file, fileList) {
                console.log(fileList);
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })

                this.ruleForm.license = imgs;
                console.log(this.ruleForm.license)
            },

            bcPicChange(Response, file, fileList) {
                console.log(fileList);
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })

                this.ruleForm.bcPic = imgs;
                console.log(this.ruleForm.bcPic)

            },

            bcPicRemove(Response, file, fileList) {
                console.log(fileList);
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.ruleForm.bcPic = imgs;

                console.log(this.ruleForm.bcPic)
            }
        }
    }
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
</style>
<style scoped>

    @import url("../css/D-coach-training.css");

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>
